<template>
  <div
    class="base-content"
    key="ColorSuggest"
  >
    <el-form label-width="120px">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>原色预览</span>
              </div>
            </template>
            <el-form-item
              label="选择颜色"
              data-step="1"
              data-intro="在这里选择基础颜色"
            >
              <el-color-picker
                v-model="temp"
                @active-change="colorChange"
              />
              <el-button
                type="primary"
                style="margin-left: 1em"
                @click="suggest"
                >开始推荐</el-button
              >
            </el-form-item>
          </el-card>
        </el-col>
        <el-col :span="24"> </el-col>
        <el-col
          :span="24"
          v-if="suggested"
        >
          <el-row :gutter="10">
            <el-col
              v-for="(item, index) of plans"
              :key="index"
              style="margin-top: 1em"
              :span="12"
            >
              <el-card class="box-card">
                <template #header>
                  <div class="card-header">
                    <span>{{ item.title }}</span>
                  </div>
                </template>
                <div style="display: flex">
                  <div
                    v-for="(it, idx) of item.colors"
                    :key="idx"
                    class="color-block"
                    :style="{ 'background-color': it }"
                    @click="onCopy(it)"
                  >
                    背景色预览
                  </div>
                </div>

                <div style="display: flex">
                  <div
                    v-for="(it, idx) of item.colors"
                    :key="idx"
                    class="color-block"
                    :style="{ color: it }"
                  >
                    字体色预览
                  </div>
                </div>

                <div style="display: flex">
                  <div
                    class="color-block"
                    :style="{ background: `linear-gradient(to right, ${item.colors.join(',')})` }"
                  >
                    渐变色预览
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { copyText, hsvToRgb, hexToRgb, rgbToHsv, rgbToHex } from '@/utils/utils'
import { ref, Ref } from 'vue'

//方案
let plans: Ref<Array<{ title: any; colors: Array<any> }>> = ref([])
let temp = ref('#67C23A')
let suggested = ref(false)
const onCopy = (e: string) => {
  copyText(e)
}
const colorChange = (v: string) => {
  temp.value = v
  if (suggested.value) {
    suggest()
  }
}
const suggest = () => {
  suggested.value = true
  let lighter = lightenDarkenColor(temp.value, 80)
  let like1 = getColorByAngle(temp.value, 30)
  let like2 = getColorByAngle(temp.value, -30)
  let similar1 = getColorByAngle(temp.value, 60)
  let similar2 = getColorByAngle(temp.value, -60)
  let similar3 = getColorByAngle(temp.value, 90)
  let similar4 = getColorByAngle(temp.value, -90)
  let cc = getColorByAngle(temp.value, 180)
  let list = []
  list.push({
    title: '保守方案1',
    colors: [temp.value, like1, similar1]
  })
  list.push({
    title: '保守方案2',
    colors: [temp.value, like2, similar2]
  })
  list.push({
    title: '保守方案3',
    colors: [temp.value, like1, similar3]
  })
  list.push({
    title: '保守方案4',
    colors: [temp.value, like2, similar4]
  })
  list.push({
    title: '激进方案1',
    colors: [temp.value, similar1, cc]
  })
  list.push({
    title: '激进方案2',
    colors: [temp.value, similar2, cc]
  })
  list.push({
    title: '激进方案3',
    colors: [temp.value, similar3, cc]
  })
  list.push({
    title: '激进方案4',
    colors: [temp.value, similar4, cc]
  })
  plans.value = list
}
// 深浅色
const lightenDarkenColor = function (col: string, amt: number) {
  let usePound = false

  if (col[0] == '#') {
    col = col.slice(1)
    usePound = true
  }

  let num = parseInt(col, 16)

  let r = (num >> 16) + amt

  if (r > 255) r = 255
  else if (r < 0) r = 0

  let b = ((num >> 8) & 0x00ff) + amt

  if (b > 255) b = 255
  else if (b < 0) b = 0

  let g = (num & 0x0000ff) + amt

  if (g > 255) g = 255
  else if (g < 0) g = 0

  let result = (usePound ? '#' : '') + String('000000' + (g | (b << 8) | (r << 16)).toString(16)).slice(-6)

  return result.toUpperCase()
}

const getColorByAngle = (color: string, angle: number) => {
  let rgb = hexToRgb(color)
  let hsv = rgbToHsv(rgb[0], rgb[1], rgb[2])
  let hue = hsv[0] + angle

  let result = hsvToRgb(hue, hsv[1], hsv[2]) // 调用函数计算RGB值
  return rgbToHex(result[0], result[1], result[2])
}
</script>

<style scoped>
.main-content {
  margin-top: 1em;
  padding: 0 10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.color-test {
  padding: 1em;
  text-align: center;
  background-color: white;
}

.bak-test {
  padding: 1em;
  text-align: center;
  color: white;
}
.color-block {
  height: 3em;
  flex: 1;
  text-align: center;
  line-height: 3em;
  color: white;
  cursor: pointer;
}
</style>
